<template>
    <div id="loginForm">
        <el-form ref="loginForm" :model="loginData" :rules="rules" status-icon label-width="80px" label-position="right">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="loginData.username" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="loginData.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="doLogin(loginForm)">登录</el-button>
            <el-button @click="resetLogin(loginForm)">清空</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive,ref } from 'vue';
import http from '@/utils/http'
import {sha256} from 'js-sha256'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
let loginForm=ref(null);//定义this.$refs.xx引用
let loginData=reactive({
    username:"",
    password:""
});
// let router=useRouter();
let store=useStore();
let rules=reactive({
    username:[
        {required:true,message:"用户名不能为空",trigger:'blur'},
        {min:3,max:20,message:"用户长度为3-20个字符",trigger:'blur'},
        // {type:'email',message:"用户名不是正确的邮箱格式",trigger:'blur'}
        // {pattern://,message:}
    ],
    password:[
        {required:true,message:"密码不能为空",trigger:'blur'},
        {min:3,max:20,message:"密码长度为3-20个字符",trigger:'blur'},
    ]
});
let doLogin=(loginForm)=>{
    if(!loginForm) return;
    loginForm.validate(async (ispass)=>{
        if(ispass){
            // console.log('加密hello===>',sha256('hello'));console.log("====>",sha256('hello'));
            // console.log("验证通过",loginData);  这里登录的密码需要 sha256加密之后传输.
            let loginData2={...loginData,password:sha256(loginData.password)}
            store.dispatch("doLogin",loginData2);
            // loginData.password=sha256(loginData.password);// sha256加密
            
            // let result=await http.get("/user/login",{
            //     params:loginData
            // });
            // if(result.data.status==200){
            //     ElMessage({
            //         message:"登录成功",
            //         type:"success"
            //     });
            //     localStorage.setItem("Authorization",result.data.data.Authorization);
            //     localStorage.setItem("userInfo",JSON.stringify(result.data.data));
            //     router.push({name:"Manage"});//router.push({path:"/manage"})//router.push("/manage")//this.$router.push();//编程式导航
            // }else{
            //     ElMessage({
            //         message:"账号或密码错误",
            //         type:"error"
            //     });
            //     loginData.password="";
            // }
            
        }else{
            console.log("验证不通过")
        }
    });
}
let resetLogin=(loginForm)=>{
    if(!loginForm) return;
    loginForm.resetFields();
}
</script>

<style scoped>
#loginForm{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
</style>